<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extend.tld" prefix="extend"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	
	<head>		
		<title>乐盈培训网 - 注册新用户</title>
		<style type="text/css">
			.horizontal_line {
  				BACKGROUND-COLOR: #B2D0EA;
  				COLOR: #B2D0EA; 
  				FONT-SIZE: 1px;
  				LINE-HEIGHT: 1px;
			}
		</style>
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/jquery.js"></script>
		<link href="<extend:contextPath name="contextPath"/>/css/style.css" rel="stylesheet" type="text/css" />
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/common.js"></script>
	</head>		
	
	<body>
				
		<div style="position:absolute; height:100%; width:1045px;">
					
			<jsp:include page="header.jsp"></jsp:include>
			<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size:12px;">
				<tr>
					<td height="25px">
						您现在的位置：<a href="<extend:contextPath name="contextPath"/>" class="normal_link">首页</a> >> 
						注册用户
					</td>
				</tr>
			</table>
			
			<script>
			function showUserIdRule()
			{	
				$("#userIdRule")[0].innerHTML = '账号请以字母开头，长度6~12位。可以包含数字、字母(不分大小写)　或下划线';
				$("#userIdRule")[0].style.display = 'block';
				$("#checkIdOK")[0].style.display = 'none';
			}
			function go()
			{
				checkUserId(document.getElementsByName("user.loginName")[0].value);
				checkPwd(document.getElementsByName("user.password")[0].value);
				confirmPwd(document.getElementsByName("confirmPassword")[0].value);
				checkCode(document.getElementsByName("validateCode")[0].value);
				
				if(validateUserId == 'true' && validatePwd == 'true' && validateConfirmPwd == 'true' && checkCodeResult == 'true')
				{	
					$("#validateCode")[0].style.display = 'none';
					$("#codeOK")[0].style.display = 'block';
					document.forms[1].submit();
				}
			}
			</script>
			
			<div id="register" style="width:810px; margin-top:10px; margin-left:100px;border: 1px solid #B2D0EA; padding-bottom:10px;">
				<html:form action="/registerProcess?method=registerUser">
				<table cellpadding="0" cellspacing="0" style="margin-top:25px; margin-left:10px; font-size:14px;">
					<tr>
						<td height="35px" align="center" width="100">
							<font style="color:#1B8C88"><b>用 户 名：</b></font>	
						</td>
						<td width="200">
							<html:text property="user.loginName" styleClass="form_field" onfocus="showUserIdRule();" onblur="checkUserId(this.value);"/>
						</td>
						<td valign="center">
							<div id="userIdRule" style="display:none; height:20px; color:red">
							</div>
							<div id="checkIdOK" class="checkPassed" />
						</td>
					</tr>					
					<tr>
						<td height="35px" align="center" width="100">
							<font style="color:#1B8C88"><b>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</b></font>	
						</td>
						<td width="200">
							<html:password property="user.password" styleClass="form_field" onfocus="checkPwd(this.value);" onblur="checkPwd(this.value)"/>
						</td>
						<td>
							<div id="passwordRule" style="display:none; height:20px; color:red;">
							</div>
							<div id="checkPwdOK" class="checkPassed" />
						</td>
					</tr>					
					<tr>
						<td height="35px" align="center" width="100">
							<font style="color:#1B8C88"><b>密码确认：</b></font>	
						</td>
						<td width="200">
							<html:password property="confirmPassword" styleClass="form_field" onfocus="confirmPwd(this.value);" onblur="confirmPwd(this.value);"/>
						</td>
						<td>
							<div id="confirmPwdRule" style="display:none; height:20px; color:red;"></div>		
							<div id="confirmPwdOK" class="checkPassed" />
						</td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>真实姓名：</b></font>	</td>
						<td width="200"><html:text property="user.trueName" styleClass="form_field"/></td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>电子邮箱：</b></font>	</td>
						<td width="200"><html:text property="user.userEmail" styleClass="form_field"/></td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>联系电话：</b></font>	</td>
						<td width="200"><html:text property="user.userPhone" styleClass="form_field"/></td>
					</tr>
					
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>所在企业：</b></font>	</td>
						<td width="200"><html:text property="user.userCompany" styleClass="form_field"/></td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>所在部门：</b></font>	</td>
						<td width="200"><html:text property="user.userDepartment" styleClass="form_field"/></td>
					</tr>
					
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</b></font>	</td>
						<td width="200">
							<html:radio property="user.sex" value="M">男</html:radio>
							<html:radio property="user.sex" value="F">女</html:radio>
						</td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100"><font style="color:#1B8C88"><b>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</b></font>	</td>
						<td width="200">
							<html:select property="user.age">
								<html:options name="ages"/> 
							</html:select>
						</td>
					</tr>
					<tr>
						<td height="35px" align="center" width="100">
							<font style="color:#1B8C88"><b>验证码：</b></font>	
						</td>
						<td width="200">
							<html:text property="validateCode" onblur="checkCode(this.value);"/>
						</td>
						<td>
							<div id="validateCode" style="display:none; height:20px; color:red;"></div>
							<div id="codeOK" class="checkPassed" />
						</td>
					</tr>
					<tr>
						<td height="20px">&nbsp;</td>
						<td width="200">
							<img id="ssimg" src="<extend:contextPath name="contextPath"/>/ValidateCodeServlet" /> &nbsp;&nbsp;&nbsp;
								<a href="javascript:refresh('ssimg')">刷新</a>
						</td>
						<script>
							function refresh(ss)
							{	
								$('#ssimg')[0].src = "<extend:contextPath name="contextPath"/>/ValidateCodeServlet?addddd=" + new Date();
							}
						</script>
					</tr>
					<tr>
						<td height="35px" align="left" colspan="3">	
							&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" checked /> &nbsp;我已同意用户条款.
						</td>
					</tr>
					<tr>
						<td><html:button styleClass="button" property="btn" onclick="go();">注册</html:button></td>
					</tr>
					
				</table>	
				</html:form>								
			</div>	
			
			<table width="100%">
					<tr><td height="10"></td></tr>
			</table>
			<table width="100%">
					<tr><td height="1" bgcolor="red"></td></tr>
			</table>
			
				
		</div>	
					
	</body>
	
</html>